<!--
 * @Author: yuqy
 * @Date: 2023-01-13 14:21:44
 * @LastEditors: yuqy
 * @LastEditTime: 2023-10-24 10:11:27
 * @Descripttion: -
-->
<template>
  <div class="btn_wrap">
    <div class="set_down btn_inner" @click="exit(2)" v-ripple>
      <span>
        <van-icon name="bell" size="16"/>下课
      </span>
    </div>

    <div
      class="set_mini btn_inner van-hairline--left van-hairline--right"
      @click="openWhiteBloard()"
      v-ripple
    >
      <span>
        <van-icon name="cluster" size="16"/>打开白板
      </span>
    </div>

    <div class="set_down btn_inner" v-ripple>
      <van-popover
        placement="top"
        theme="dark"
        v-model="showPopover"
        trigger="click"
        :actions="actions"
        @select="onSelect"
      >
        <template #reference>
          <van-icon name="weapp-nav" size="16"/>更多
        </template>
      </van-popover>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import { mapState, mapActions, mapGetters } from "vuex";
import util from "@/libs/util";
import "vant/es/popover/style";
// import "vant/es/share-sheet/style";
let actions = [
  { text: "个人中心", type: 1, webShow: true },
  { text: "打开副屏", type: 2, webShow: true },
  { text: "视频源", type: 3, webShow: true },
  { text: "音频源", type: 4, webShow: false },
  { text: "最小化", type: 5, webShow: false },
  { text: "开始直播", type: 10, webShow: true }
];
let options = [
  { name: "复制链接", icon: "link", type: 1 },
  { name: "二维码", icon: "qrcode", type: 2 },
  { name: "发送到手机", icon: "poster", type: 3 }
];
// 获取网页观看的直播链接
import { getLiveUrl } from "@/libs/homeredirect";
import { Message } from 'view-ui-plus';
const publicPath = null;
export default {
  name: "btnList",
  components: {},
  props: {
    deviceVideoId: {
      type: String,
      default: "0"
    },
    showDaoPcDesktop: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options,
      isShowLiveCode: false,
      isShowLiveData: false,
      showPopover: false,
      actions,
      isShowMoreBtn: false,
      isMini: false,
      isAllScreen: false, // 是否全屏
      liveCodeBase64: null // 观看直播二维码链接
    };
  },
  mixins: [],
  mounted() {
    // this.liveUrl = getLiveUrl(this.code);
    if (this.APP_IS_Web) {
      this.actions = actions.filter(s => {
        return s.webShow;
      });
    }
  },
  created() {},
  destroyed() {},
  computed: {
    isShowAllBtn() {
      return !this.isWeb && this.deviceVideoId != 6 && !this.showDaoPcDesktop;
      // return true
    },
    ...mapState({
      userInfo: state => state.user.userInfo, // 获取用户信息
      showLiveing: state => state.user.showLiveing, // 是否开启了直播
      liveData: state => state.user.liveData, // 直播数据
    }),
    ...mapGetters({
      uid_: 'user/getUserUid'
    })
  },
  methods: {
    ...mapActions('roomAgora', ['startLiveStream', 'deldeteLiveStream']),
    onSelectShare({ type }) {},
    onSelect({ type }) {
      switch (type) {
        case 1: // 个人中心
          this.exit(3);
          break;
        case 2: // 打开副屏
          this.openAudience();
          break;
        case 3: // 视频源
          this.showCamera();
          break;
        case 4: // 音频源
          this.showMirphone();
          break;
        case 5: // 最小化
          this.exit(1);
          break;
        case 10: // 开始旁路推流直播
          this.startLiveStreamFn();
          break;
        default:
          break;
      }
    },
    /**
     * @name: 打开副屏
     * @msg:
     * @return {*}
     */

    openAudience(code) {
      this.isShowMoreBtn = false;
      this.$emit("openAudience");
    },
    /**
     * @name: 选择视频源
     * @msg:
     * @return {*}
     */

    showCamera() {
      this.isShowMoreBtn = false;
      this.$emit("showCamera");
    },
    /**
     * @name: 选择音频源 麦克风
     * @msg:
     * @return {*}
     */

    showMirphone() {
      this.isShowMoreBtn = false;
      this.$emit("showMirphone");
    },
    /**
     * @name: 打开互动白板
     * @msg:
     * @return {*}
     */
    openWhiteBloard() {
      this.$emit("openWhiteBloard");
    },
    exit(type) {
      this.isShowMoreBtn = false;
      this.$emit("exit", type);
    },
    /**
     * @name: 开始旁路推流直播
     * @msg:
     * @return {*}
     */

    async startLiveStreamFn() {
      // 正在直播中
      if (this.showLiveing) {
        return this.deldeteLiveStream(true);
      }
      let uuid = '2' + this.uid_;
      let params = {
        code: this.code,
        uuid: uuid,
        uuids: uuid,
        rtcChannel: this.userInfo.phone
      }
      let res = await this.startLiveStream(params)
      if (res) {
        Message.success("操作成功!");
        this.actions.forEach(element => {
          if (element.type == 10) element.text = "关闭直播";
        });
      }
    },
    /**
     * @name: 删除旁路推流直播
     * @msg:
     * @return {*}
     */

    async deldeteLiveStreamFn(show) {
      if (!this.liveData) return;
      let params = {
        channelName: this.channelName,
        converterId: this.liveData.id
      }
      await this.deldeteLiveStream(params)
      this.actions.forEach(element => {
        if (element.type == 10) element.text = "开启直播";
      });
      if (show) {
        Message.success("操作成功!");
      }
    }
  }
};
</script>

<style lang="less" scoped >
.btn_wrap {
  text-align: center;
  padding: 0px 0px 0px;
  display: flex;
  justify-content: space-between;
  .btn_inner {
    width: 33%;
    color: #333;
    white-space: nowrap;
    user-select: none;
    span {
      display: block;
      text-align: center;
      padding: 10px 0px 10px;
      font-size: 14px;
      line-height: 24px;
    }
    :deep(.van-popover__wrapper) {
      display: block;
      text-align: center;
      padding: 10px 0px 10px;
      font-size: 14px;
      line-height: 24px;
    }
    :deep(i) {
      margin-right: 5px;
      vertical-align: baseline;
    }
    :deep(.van-popover__wrapper) {
      width: 100%;
    }
  }
}
</style>

